<template>
  <div class="img-detail">
    <my-header outerTitle="图文详情"></my-header>
    <div>
      <h3 class="img-title">{{imsInfoList.title}}</h3>
      <p class="img-info">
        <span class="time">{{imsInfoList.add_time | filterTime}}</span>
        <span>{{imsInfoList.click}}次点击</span>
        <span>xxx分类</span>
      </p>
    </div>
    <ul>
      <li>
        <vue-preview :slides="thumbList" @close="handleClose"></vue-preview>
      </li>
    </ul>
    <div class="content" v-html="imsInfoList.content"></div>
    <comment :id="id"></comment>
  </div>
</template>
<script>
import myHeader from '@/components/myHeader'
import comment from '@/components/comment'
import { getImgDetail, getImageInfo } from '@/api'
export default {
  components: {
    myHeader,
    comment
  },
  data () {
    return {
      id: this.$route.params.id,
      thumbList: [], // 缩略图
      imsInfoList: {} // 缩略图描述
    }
  },
  created () {
    this.initThumb()
    this.initImagsInfo()
  },
  methods: {
    // 初始化缩略图
    initThumb () {
      getImgDetail(this.id)
        .then(res => {
          console.log(res)
          // 拼接数据，因为后台返回来的数据没有vue-preview中的某些属性
          res.message.map(item => {
            // 强制把后台的大图赋给缩略图
            item.msrc = item.src
            item.w = 600
            item.h = 400
          })
          this.thumbList = res.message
        })
    },
    // 初始化图文描述
    initImagsInfo () {
      getImageInfo(this.id)
        .then(res => {
          // console.log(res)
          this.imsInfoList = res.message[0]
        })
    },
    handleClose () {

    }
  }
}
</script>
<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  li > div > div{
    display: flex;
    flex-wrap: wrap;
    &>figure{
      width: 33.33%;
    }
  }
</style>

<style lang="scss" scoped>
.img-detail {
  margin-top: 40px;
  margin-bottom: 55px;

  .img-title {
    font-size: 16px;
    font-weight: bold;
  }
  .img-info {
    display: flex;
    justify-content: space-around;
    color: #26a2ff;
    font-size: 14px;
  }
  .content {
    font-size: 14px;
  }
}
</style>
